<!-- src/renderer/App.vue -->
<script setup>
import { ref } from 'vue';
import DockBar from './components/DockBar.vue';

// 先从本地配置读，没有就给个空数组
/* 先给几个空图标，让界面能出来 */
//这数组是传递给 DockBar 组件的 icons 属性的
const icons = ref([
  { id: 1, name: 'Firefox', icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/firefox/firefox-original.svg', color: 'red', progress: 0 },
  { id: 2, name: 'Filesaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa', icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vscode/vscode-original.svg', color: 'blue', progress: 0 },
  { id: 3, name: 'Files', icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vscode/vscode-original.svg', color: 'blue', progress: 0 }
])
function addIcon() {
  //prompt方法是弹出一个输入框，返回用户输入的值到name 变量中
  const name = prompt('程序名');
  const exec = prompt('执行命令');
  if (!name || !exec) return;
  icons.value.push({
    id: Date.now(),
    name,
    exec,
    icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vscode/vscode-original.svg',
    color: 'gray',
    progress: 0
  });
  save();
}
function delIcon(id) {
  icons.value = icons.value.filter(i => i.id !== id);
  save();
}
function save() {
  //electronAPI.setConf方法，将icons保存到本地配置文件中
  // JSON.stringify() 方法将 JavaScript 值转换为 JSON 字符串
  // 本地配置文件只能存储字符串，所以要转换一下
  window.electronAPI.setConf('icons', JSON.stringify(icons.value));
}
</script>

<template>
  <!-- <DockBar :icons="icons" @add-icon="addIcon" @del-icon="delIcon" /> -->
  <DockBar :icons="icons" dock-pos="bottom" merge-mode="never" />
</template>



<style>
/* 全局透明背景，配合 Electron 透明窗口 */
#app{
  margin: 0;
  background: rgb(200, 255, 0);
  padding: 0;
}

html{
  margin: 0;
  background: rgb(143, 143, 143);
  padding: 0;
  border: 10px dotted black;
}


body {
  margin: 0 0 0 0 ;
  background: rgb(190, 4, 236);
  padding: 0;
}
</style>